<template>
  <v-container class="my-10 gas-center-section">
    <v-row class="text-center mb-8">
      <v-col cols="12">
        <h2 class="text-h4 font-weight-bold">{{ $t('gasCenter.title') }}</h2>
        <p class="text-subtitle-1 mt-2">{{ $t('gasCenter.subtitle') }}</p>
      </v-col>
    </v-row>
    
    <v-row class="gas-center-content position-relative">
      <!-- 左箭头按钮 -->
      <v-btn
        icon
        size="large"
        color="primary"
        class="gas-nav-btn position-absolute left-arrow"
        style="left: 10px; top: 50%; transform: translateY(-50%); z-index: 10;"
        :disabled="gasesArray.length <= 1"
        @click="previousGas"
      >
        <v-icon>mdi-chevron-left</v-icon>
      </v-btn>
      
      <v-col cols="12" md="6" class="gas-info-section">
        <div class="gas-info-container">
          <transition name="slide-left" mode="out-in">
            <div :key="currentGasIndex" class="gas-info">
              <h3 class="text-h5 font-weight-bold mb-4 primary--text">{{ currentGas.name }}</h3>
              <p class="text-body-1 gas-description">{{ currentGas.description }}</p>
            </div>
          </transition>
        </div>
      </v-col>
      
      <v-col cols="12" md="6" class="gas-image-section">
        <div class="gas-image-container">
          <transition name="slide-right" mode="out-in">
            <v-img
              :key="currentGasIndex"
              :src="currentGas.image"
              height="400"
              cover
              class="gas-image"
            >
              <div class="gas-image-overlay">
                <v-icon size="48" color="white" class="gas-icon">mdi-flask</v-icon>
              </div>
            </v-img>
          </transition>
        </div>
      </v-col>
      
      <!-- 右箭头按钮 -->
      <v-btn
        icon
        size="large"
        color="primary"
        class="gas-nav-btn position-absolute right-arrow"
        style="right: 10px; top: 50%; transform: translateY(-50%); z-index: 10;"
        :disabled="gasesArray.length <= 1"
        @click="nextGas"
      >
        <v-icon>mdi-chevron-right</v-icon>
      </v-btn>
    </v-row>
    
    <!-- 圆点指示器 -->
    <v-row class="justify-center mt-6">
      <v-col cols="12" class="text-center">
        <div class="gas-indicators">
          <v-btn
            v-for="(gas, index) in gasesArray"
            :key="`gas-dot-${index}-${$i18n.locale}`"
            icon
            size="small"
            :color="currentGasIndex === index ? 'primary' : 'grey-lighten-3'"
            :variant="currentGasIndex === index ? 'flat' : 'outlined'"
            class="gas-dot-indicator"
            @click="switchGas(index)"
          >
            <v-icon size="8">mdi-circle</v-icon>
          </v-btn>
        </div>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import zhMessages from '@/locales/zh.js'
import enMessages from '@/locales/en.js'

export default {
  name: 'GasCenter',
  data() {
    return {
      currentGasIndex: 0,
      gasAutoSwitchTimer: null
    }
  },
  computed: {
    gasesArray() {
      try {
        const currentLocale = this.$i18n?.locale?.value || this.$i18n?.locale || 'en';
        
        let messages = null;
        if (this.$i18n && this.$i18n.messages && this.$i18n.messages[currentLocale]) {
          messages = this.$i18n.messages[currentLocale];
        } else {
          messages = currentLocale === 'zh' ? zhMessages : enMessages;
        }
        
        if (!messages || !messages.gasCenter || !messages.gasCenter.gases) {
          console.error('❌ 无法获取气体数据');
          return [];
        }
        
        const gases = messages.gasCenter.gases;
        const gasArray = [
          gases.oxygen,
          gases.nitrogen,
          gases.argon,
          gases.carbonDioxide,
          gases.hydrogen,
          gases.helium
        ];
        
        const validGases = gasArray.filter(gas => gas && gas.name && gas.description);
        return validGases;
      } catch (error) {
        console.error('❌ gasesArray 错误:', error);
        return [];
      }
    },
    currentGas() {
      if (this.gasesArray.length === 0 || 
          this.currentGasIndex < 0 || 
          this.currentGasIndex >= this.gasesArray.length || 
          isNaN(this.currentGasIndex)) {
        return {
          name: this.$i18n.locale === 'zh' ? '加载中...' : 'Loading...',
          description: this.$i18n.locale === 'zh' ? '正在加载气体信息...' : 'Loading gas information...',
          image: ''
        };
      }
      
      const gas = this.gasesArray[this.currentGasIndex];
      return gas || {
        name: this.$i18n.locale == 'zh' ? '加载中...' : 'Loading...',
        description: this.$i18n.locale == 'zh' ? '正在加载气体信息...' : 'Loading gas information...',
        image: ''
      };
    }
  },
  mounted() {
    this.startAutoSwitch();
  },
  beforeUnmount() {
    if (this.gasAutoSwitchTimer) {
      clearInterval(this.gasAutoSwitchTimer);
    }
  },
  methods: {
    switchGas(index) {
      if (index >= 0 && index < this.gasesArray.length && !isNaN(index) && index !== this.currentGasIndex) {
        if (this.gasAutoSwitchTimer) {
          clearInterval(this.gasAutoSwitchTimer);
          setTimeout(() => {
            this.startAutoSwitch();
          }, 10000);
        }
        
        this.currentGasIndex = index;
      }
    },
    nextGas() {
      if (this.gasesArray.length > 1) {
        const nextIndex = (this.currentGasIndex + 1) % this.gasesArray.length;
        this.switchGas(nextIndex);
      }
    },
    previousGas() {
      if (this.gasesArray.length > 1) {
        const prevIndex = this.currentGasIndex === 0 ? this.gasesArray.length - 1 : this.currentGasIndex - 1;
        this.switchGas(prevIndex);
      }
    },
    startAutoSwitch() {
      this.gasAutoSwitchTimer = setInterval(() => {
        if (this.gasesArray.length > 0) {
          this.currentGasIndex = (this.currentGasIndex + 1) % this.gasesArray.length;
        }
      }, 6000);
    }
  },
  watch: {
    '$i18n.locale': {
      handler() {
        this.currentGasIndex = 0;
        this.$nextTick(() => {
          if (this.gasesArray.length > 0 && this.currentGasIndex >= this.gasesArray.length) {
            this.currentGasIndex = 0;
          }
        });
      },
      immediate: true
    }
  }
}
</script>

<style scoped>
.gas-center-section {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 20px;
  padding: 60px 20px;
  margin: 40px auto;
}

.gas-center-content {
  min-height: 400px;
  align-items: center;
}

.gas-info-section {
  display: flex;
  align-items: center;
  min-height: 400px;
}

.gas-info-container {
  width: 100%;
  padding: 20px;
}

.gas-info {
  background: rgba(255, 255, 255, 0.9);
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.gas-description {
  line-height: 1.8;
  color: #555;
  font-size: 16px;
}

.gas-image-section {
  display: flex;
  align-items: center;
  min-height: 400px;
}

.gas-image-container {
  width: 100%;
  position: relative;
}

.gas-image {
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

.gas-image:hover {
  transform: scale(1.02);
}

.gas-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gas-image:hover .gas-image-overlay {
  opacity: 1;
}

.gas-icon {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

/* 导航按钮样式 */
.gas-nav-btn {
  transition: all 0.3s ease;
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.gas-nav-btn:hover:not(:disabled) {
  transform: translateY(-50%) scale(1.1);
  background: rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(15px);
  box-shadow: 0 6px 25px rgba(25, 118, 210, 0.2);
}

.gas-nav-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.gas-nav-btn:disabled {
  opacity: 0.2;
  background: rgba(255, 255, 255, 0.1) !important;
}

.gas-nav-btn .v-icon {
  color: rgba(25, 118, 210, 0.8) !important;
  font-size: 28px;
}

.gas-nav-btn:hover:not(:disabled) .v-icon {
  color: rgba(25, 118, 210, 1) !important;
}

/* 圆点指示器样式 */
.gas-indicators {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.gas-dot-indicator {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  transition: all 0.3s ease;
}

.gas-dot-indicator:hover {
  transform: scale(1.2);
}

/* 文字内容左侧进入动画 */
.slide-left-enter-active {
  transition: all 0.6s ease;
}

.slide-left-leave-active {
  transition: all 0.4s ease;
}

.slide-left-enter-from {
  transform: translateX(-100px);
  opacity: 0;
}

.slide-left-leave-to {
  transform: translateX(100px);
  opacity: 0;
}

/* 图片右侧进入动画 */
.slide-right-enter-active {
  transition: all 0.6s ease;
}

.slide-right-leave-active {
  transition: all 0.4s ease;
}

.slide-right-enter-from {
  transform: translateX(100px);
  opacity: 0;
}

.slide-right-leave-to {
  transform: translateX(-100px);
  opacity: 0;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .gas-nav-btn {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.25) !important;
  }
  
  .gas-nav-btn .v-icon {
    font-size: 24px;
  }
  
  .gas-nav-btn:hover:not(:disabled) {
    transform: translateY(-50%) scale(1.05);
  }
  
  .gas-center-content {
    align-items: stretch;
  }
  
  .gas-info-section,
  .gas-image-section {
    min-height: 300px;
  }
  
  .left-arrow {
    left: 5px !important;
  }
  
  .right-arrow {
    right: 5px !important;
  }
}

@media (max-width: 600px) {
  /* 超小屏幕时调整布局 */
  .gas-center-content {
    flex-direction: column;
  }
  
  .gas-nav-btn {
    position: relative !important;
    margin: 10px 0;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    background: rgba(255, 255, 255, 0.3) !important;
  }
  
  .gas-nav-btn:hover:not(:disabled) {
    transform: scale(1.05) !important;
  }
  
  .left-arrow,
  .right-arrow {
    position: relative !important;
    display: inline-flex;
    margin: 0 10px;
  }
}
</style>